<template>
  <div class="applicationTwoPart flex">
    <div class="part part1 flex flex-column flex-center">
      <div class="main1">
        <img src="@/assets/img/home/application_icon1.png" alt="">
        <p>About TSINGHUA</p>
        <h2>了解清华</h2>
      </div>
    </div>
    <div class="part part2 flex flex-column flex-center">
      <div class="main2">
        <div class="rightIcon">
          <img src="@/assets/img/home/application_icon2.png" alt="">
        </div>
        <p>How to join Tsinghua</p>
        <h2>报考清华的十种途径</h2>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "applicationTwoPart"
}
</script>

<style lang="less" scoped>
.applicationTwoPart {
  .part {
    height: 27rem;
    width: 50%;
    font-size: 1.8rem;
    color: #fff;
    h2 {
      font-weight: 400;
      font-size: 1.8rem;
    }

    p {
      text-transform: uppercase;
      //font-family: 'raleway';
      font-weight: 400;
    }

    img {
      width: 9rem;
      height: 9rem;
      margin-bottom: 1rem;
    }
  }

  .part1 {
    background: url("../../../../assets/img/home/application_bg1.png") no-repeat;
    .main1 {
      margin-left: 5rem;
    }
  }

  .part2 {
    position: relative;
    background: url("../../../../assets/img/home/application_bg2.png") no-repeat;
    .main2 {
      position: absolute;
      right: 5rem;
      text-align: right;
      .rightIcon{
        img{
          margin: 0 0 1rem auto;
        }
      }
    }
  }
}
.part:hover{
  background-size: 65rem;
}
</style>